
.popup-dialog {
    --popup-animation-time: 1s;
    background: white;
    border: solid black 2px;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    animation-duration: var(--popup-animation-time) !important;
    animation-fill-mode: both !important;
    padding: 2%;
}

    .popup-dialog.down {
        animation: popup-downward var(--popup-animation-time);
    }

    .popup-dialog.up {
        animation: popup-upward var(--popup-animation-time);
    }

@keyframes popup-downward {
    from {
        opacity: 0;
        top: -80%;
    }

    to {
        opacity: 1;
        top: 5%;
    }
}

@keyframes popup-upward {
    from {
        opacity: 1;
        top: 5%;
    }

    to {
        opacity: 0;
        top: -80%;
    }
}
